<template>
  <div class="hello">
    <main>
      <div class="wrapper">
        <div class="shake-wrapper">
          <div class="star-wrapper">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="plane-wrapper">
            <span></span>
          </div>
          <div class="city-wrapper bg">
            <div class="city-set">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="city-set">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
          <div class="city-wrapper">
            <div class="city-set">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="city-set">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
          <div class="pole-wrapper">
            <div class="pole-wire">
              <div class="pole"></div>
              <div class="wire"></div>
            </div>
            <div class="pole-wire">
              <div class="pole"></div>
              <div class="wire"></div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {};
    },
    methods: {},
  };
</script>

<style lang="less" scoped>
  body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111;
  }

  main {
    .wrapper {
      --shake: 0px;
      width: 60rem;
      height: 36rem;
      position: relative;
      overflow: hidden;
      background-image: linear-gradient(to bottom, #081744, #511486 40%, #ab490e 90%, #f58510);
      border-radius: 4rem 4rem;
      animation: shake 1s infinite linear;

      // window frame
      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 1rem;
        top: 20%;
        left: 0;
        background-color: #111;
        z-index: 1;
        display: none;
      }

      .shake-wrapper {
        --shake: 2px;
        height: 100%;
        width: 100%;
        position: relative;
        animation: inherit;

        .plane-wrapper {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;

          &>* {
            display: block;
            position: absolute;
            left: 0%;
            top: 20%;
            width: 6px;
            height: 2px;
            background-color: #111;
            border-radius: 2px;
            animation: fly 90s infinite linear;

            &::before,
            &::after {
              content: '';
              animation: blink 2s infinite linear;
              display: block;
              position: absolute;
              width: 2px;
              height: 2px;
              border-radius: 2px;
            }

            &::before {
              background-color: #7edc4e;
            }

            &::after {
              left: 3px;
              top: -1px;
              background-color: #9fff1f;
            }
          }
        }

        .city-wrapper {
          --scale: 1;
          height: 100%;
          display: flex;
          width: 160rem;
          position: absolute;
          top: 0;
          left: 0;
          animation: move 22s infinite linear;

          &.bg {
            animation-duration: 30s;
            top: initial;
            bottom: 5%;
            --scale: 0.5;

            .city-set {
              &>* {
                background-color: #29160a;

                &::before,
                &::after {
                  background-color: #847e65;
                }
              }
            }
          }

          .city-set {
            flex: 1;
            height: 100%;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            transform: scale(1.05);

            /* @for $i from 1 through 30 {
              &>*:nth-child(#{$i}) {
                --top: #{1 + random() * 0.5}rem;
                --height: #{0.6 + random() * 0.2}rem;
                --width: #{0.4 + 0.2 * random()}rem;
                --left: #{0.5 + random() * 0.5}rem;
                flex: #{1 + 3 * random()};
                height: #{10% + 16% * random()};

                &::before,
                &::after {
                  top: calc(var(--top) * var(--scale));
                  left: calc(var(--left) * var(--scale));
                  width: calc(var(--width) * var(--scale));
                  height: calc(var(--height) * var(--scale));
                }

                &::after {
                  $rand: random();

                  @if $rand < 0.66 {
                    display: none;
                  }

                  @else if $rand < 0.77 {
                    top: calc(var(--top) * var(--scale));
                    left: calc((var(--left) + var(--width) + 0.5rem) * var(--scale));
                  }

                  @else {
                    top: calc((var(--top) + var(--height) + 0.5rem) * var(--scale));
                  }
                }
              }
            } */

            &>* {
              flex: 1;
              height: 20%;
              background-color: #000;
              position: relative;
              transform: inherit;

              &::before,
              &::after {
                content: '';
                display: block;
                position: absolute;
                background-color: #a29d74;
              }

              &:nth-child(21) {
                height: 33%;
                flex: 2;

                &::after {
                  display: block;
                }

                &::before {
                  background-color: #f33;
                  display: block;
                  top: -.7rem;
                  width: 2px;
                  height: 2px;
                  border-radius: 2px;
                  animation: blink2 3s infinite linear;
                }
              }
            }
          }
        }

        .pole-wrapper {
          position: absolute;
          left: 0;
          bottom: 0;
          height: 90%;
          animation: move 2s infinite linear;
          display: flex;
          width: 720rem;

          .pole-wire {
            flex: 1;
            height: 100%;
            position: relative;
            overflow: hidden;

            .pole {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 1rem;
              height: 90%;
              background-color: black;

              &::before {
                content: '';
                display: block;
                position: absolute;
                top: 5%;
                height: 2rem;
                width: 100%;
                background-color: inherit;
                transform: scaleX(3);
              }
            }

            .wire {
              position: absolute;
              width: 100%;
              height: 50%;
              border-radius: 100%;
              left: 0;
              top: 0;
              transform: scaleX(1.2) translateY(-45%);
              border: solid 1px black;

              &::before,
              &::after {
                content: '';
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                border: inherit;
                border-radius: inherit;
                transform: scaleY(1.1);
              }

              &::after {
                transform: scaleY(0.95);
              }
            }
          }
        }

        .star-wrapper {
          width: 100%;
          height: 30%;
          position: absolute;
          top: 0;
          left: 0;

          &>* {
            content: '';
            display: block;
            position: absolute;
            width: 2px;
            height: 2px;
            background-color: white;
            border-radius: 2px;

            /* @for $i from 1 through 10 {
              &:nth-child(#{$i}) {
                --opacity-min: #{0.2 + 0.2 * random()};
                --opacity: #{0.4 + 0.4 * random()};
                top: #{random() * 100%};
                left: #{random() * 100%};
                background-color: #{'hsl'}(#{random() * 360}deg, 70%, 80%);
                animation: twinkle #{3 + 3 * random()}s infinite #{-3 + -10 * random()}s both;
              }
            } */
          }
        }
      }
    }
  }

  @keyframes move {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  @keyframes shake {
    0% {
      transform: translateY(0);
    }

    3% {
      transform: translateY(var(--shake));
    }

    6% {
      transform: translateY(0);
    }

    20% {
      transform: translateY(0);
    }

    23% {
      transform: translateY(var(--shake));
    }

    26% {
      transform: translateY(0);
    }
  }

  @keyframes twinkle {
    0% {
      opacity: var(--opacity-min);
    }

    5% {
      opacity: var(--opacity);
    }

    10% {
      opacity: var(--opacity-min);
    }

    100% {
      opacity: var(--opacity-min);
    }
  }

  @keyframes fly {
    0% {
      transform: translate(-20rem, 0rem);
    }

    100% {
      transform: translate(100rem, -5rem);
    }
  }

  @keyframes blink {
    0% {
      opacity: 0;
    }

    5% {
      opacity: 0.75;
    }

    10% {
      opacity: 0;
    }

    20% {
      opacity: 0;
    }

    25% {
      opacity: 0.75;
    }

    30% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes blink2 {
    0% {
      opacity: 0;
    }

    25% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    75% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }
</style>